<template>
  <div class="titleList SKU">
    <div class="goodsTilte" style=" vertical-align: top;">
      <span class="require">*</span>SKU表：
    </div>
    <div class="titleDetail">
      <table border="1px">
        <thead>
          <tr>
            <th style="width: 12%;">颜色</th>
            <th style="width: 15%;">颜色图</th>
            <th style="width: 12%;">尺码</th>
            <th style="width: 15%;">数量</th>
            <th style="width: 31%;">商品编码</th>
            <th style="width: 15%;">操作</th>
          </tr>
        </thead>
        <tbody v-for="(item, firstIndex) in list" :key="firstIndex">
          <tr v-for="(size, index) in item.specpropertyList" :key="index">
            <td :rowspan="item.specpropertyList.length" v-if="!index">{{item.specpropertyName}}</td>
            <td :rowspan="item.specpropertyList.length" v-if="!index">
              <div class="imgUpload" :style="{'background-image': `url(${item.specpropertyImgFull})`}">
                <div class="imgUploadTitle" :class="{'white': item.specpropertyImg}">{{item.specpropertyImg? '编辑' : '上传图片'}}</div>
                <input type="file" accept="image/gif, image/jpeg, image/jpg, image/png" @change="onUploadImg($event, item)">
              </div>
            </td>
            <td>{{size.specpropertyName}}</td>
            <td>
              <w-input class="small" rule="onlyIntNo0" error="请输入数值" v-model="size.specpropertyInventCount" @input="emitChangeToParent"></w-input>
            </td>
            <td>{{size.specpropertySerial}}</td>
            <td class="textM" @click="deleteItemByIndex(firstIndex, index)">删除</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import { apiGoods } from 'js/api'
  import { mapGetters } from 'vuex'

  export default {
    props: {
      list: {
        type: Array,
        default: []
      }
    },
    methods: {
      /**
       * 上传图片
       *
       * @param { Object } ev    当前操作的输入框对象
       * @param { Object } item  当前操作的sku对象
       */
      onUploadImg(ev, item) {
        const oFile = ev.target.files[0]
        const formData = new FormData()
        if (!oFile) {
          return
        }
        if (oFile.size > 1048576) {
          this.$toast('请选择小于1M的图片')
          return
        }
        if (!/\.(png|jpeg|jpg|gif)/i.test(oFile.name)) {
          this.$toast('请选择JPG,JPEG,PNG,GIF格式的图片')
          return
        }
        formData.append('file', oFile)
        formData.append('storeId', this.$store.getters.storeId)
        formData.append('uploadType', 'main')
        formData.append('name', 'imgFile')
        formData.append('type', 'h5')

        // 将图片推送到远程
        apiGoods.goodsSwfUpload(formData).then(v => {
          item.specpropertyImg = v.oldFileName
          item.specpropertyImgFull = v.photoUrl
        })
      },

      /**
       * 从原本的数组中删除被点击的项
       *
       * @param { Number } firstIndex  父级索引
       * @param { Number } index       当前点击的条目
       */
      deleteItemByIndex(firstIndex, index) {
        // 将结果通知原本的数组
        this.$emit('delete', { firstIndex: firstIndex, secondIndex: index })
        this.$emit('on-change')
      },

      /**
       * 将更新提交给父级
       */
      emitChangeToParent() {
        this.$emit('on-change')
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 颜色图片上传
  .SKU {
    .imgUpload {
      background-repeat: no-repeat;
      background-size: cover;
      overflow: hidden;
      position: relative;
      height: 80px;
      width: 80px;
      line-height: 80px;

      .imgUploadTitle {
        width: 100%;
        text-align: center;

        &.white {
          color: white;
        }
      }
      input {
        cursor: pointer;
        width: 1000px;
        height: 1000px;
        overflow: hidden;
        opacity: 0;
        position: absolute;
        top: 0px;
        left: 0px;
      }
    }
  }
  .small {
    width: 66px;
  }
</style>